<template>
  <div class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide"
         v-for="(slide,index) in slides"
          :key="index">
          <a href="javascript:void(0)">
            <img :src="slide.url">
          </a>
        </li>
      </ul>
      <div class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  props: {
    slides: Array
  },
  mounted() {
    new Swiper('.slider .swiper-container',{
      autoplay: 3000,
      pagination: ".swiper-pagination",
      loop: true,
      observer: true
    })
  }
}
</script>
<style lang="less" scoped>
.swiper-container{
  width: 100%;
  
  position: relative;
  a, img{
    display: block;
    width: 100%;
    height: 100%;
  }
}
.baseInfo .swiper-container{
    padding-bottom: 100%;
}
.swiper-wrapper{
  position: absolute;
  top: 0;
  left: 0;
}

</style>
